<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>App / Core | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="App / Core | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>App / Core</h1>
          <ul class="docs-index"></ul>
          <p>When we init the app we can use the <code>new Framework7</code> constructor and pass an object with main app parameters:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// App id</span>
  id<span class="token punctuation">:</span> <span class="token string">'com.myapp.test'</span><span class="token punctuation">,</span>
  <span class="token comment">// Enable swipe panel</span>
  panel<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    swipe<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// ... other parameters</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <p>This constructor returns main app Framework7 instance.</p>
          <h2>App Parameters</h2>
          <p>Lets look at the list of available parameters:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>root</td>
                <td>string</td>
                <td>body</td>
                <td>App root element. If you main app layout is not a direct child of the <code>&lt;body&gt;</code> then it is required to specify root element here</td>
              </tr>
              <tr>
                <td>id</td>
                <td>string</td>
                <td>io.framework7.testapp</td>
                <td>App bundle id.</td>
              </tr>
              <tr>
                <td>name</td>
                <td>string</td>
                <td>Framework7</td>
                <td>App name. Can be used by other components, e.g. as the default title for <a href="dialog.html">Dialog</a> component.</td>
              </tr>
              <tr>
                <td>version</td>
                <td>string</td>
                <td>1.0.0</td>
                <td>App version. Can be used by other components.</td>
              </tr>
              <tr>
                <td>theme</td>
                <td>string</td>
                <td>auto</td>
                <td>App theme. Can be <code>ios</code>, <code>md</code> or <code>auto</code>. In case of <code>auto</code> it will use iOS theme for iOS devices and MD theme for all other devices.</td>
              </tr>
              <tr>
                <td>language</td>
                <td>string</td>
                <td></td>
                <td>App language. Can be used by other components. By default equal to the current browser/webview language (i.e. <code>navigator.language</code>).</td>
              </tr>
              <tr>
                <td>routes</td>
                <td>array</td>
                <td>[]</td>
                <td>Array with default routes to all views.</td>
              </tr>
              <tr>
                <td>data</td>
                <td>function</td>
                <td></td>
                <td>
                  App root data. Must be a function that returns an object with root data. For example:<pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function-variable function">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> <span class="token punctuation">{</span>
      username<span class="token punctuation">:</span> <span class="token string">'vladimir'</span><span class="token punctuation">,</span>
      firstName<span class="token punctuation">:</span> <span class="token string">'Vladimir'</span><span class="token punctuation">,</span>
      lastName<span class="token punctuation">:</span> <span class="token string">'Kharlampidi'</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                  <p>Note, that <code>this</code> inside of this data function points to <code>app</code> Framework7 instance.</p>
                </td>
              </tr>
              <tr>
                <td>methods</td>
                <td>object</td>
                <td>{}</td>
                <td>
                  App root methods. Object with methods, e.g.<pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">alert</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
                  <p>Note, that <code>this</code> inside of each method points to app Framework7 instance.</p>
                </td>
              </tr>
              <tr>
                <td>lazyModulesPath</td>
                <td>string</td>
                <td></td>
                <td>Path to Framework7's lazy components. Required to use <a href="lazy-modules.html">Lazy Modules</a> with browser modules.</td>
              </tr>
              <tr>
                <td>init</td>
                <td>boolean</td>
                <td>true</td>
                <td>By default Framework7 will be initialized automatically when you call <code>new Framework7()</code>. If you want to prevent this behavior you can disable it with this option and then initialize it manually with <code>app.init()</code> when you need it.</td>
              </tr>
              <tr>
                <td>initOnDeviceReady</td>
                <td>boolean</td>
                <td>true</td>
                <td>If automatic initialization is enabled with <code>init: true</code> parameter and app is running under cordova environment then it will be initialized on <code>deviceready</code> event.</td>
              </tr>
              <tr>
                <td>on</td>
                <td>object</td>
                <td>{}</td>
                <td>
                  Object with events handlers. For example:<pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">init</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'App initialized'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">pageInit</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Page initialized'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
              <tr>
                <th colspan="4">Clicks Module Parameters</th>
              </tr>
              <tr>
                <td>clicks</td>
                <td>object</td>
                <td></td>
                <td>
                  Object with clicks-module related parameters:<pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  clicks<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    externalLinks<span class="token punctuation">:</span> <span class="token string">'.external'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
              <tr class="subparam-open-row">
                <td colspan="4">{</td>
              </tr>
              <tr class="subparam-row">
                <td>externalLinks</td>
                <td>string</td>
                <td>'.external'</td>
                <td>CSS selector for links that should be treated as external and shouldn't be handled by Framework7. For example such '.external' value will match to links like <code>&lt;a href="somepage.html" class="external"&gt;</code> (with class "external")</td>
              </tr>
              <tr class="subparam-close-row">
                <td colspan="4">}</td>
              </tr>
              <tr>
                <th colspan="4">Touch Module Parameters</th>
              </tr>
              <tr>
                <td>touch</td>
                <td>object</td>
                <td></td>
                <td>
                  Object with touch-module related parameters:<pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  touch<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    tapHold<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
                </td>
              </tr>
              <tr class="subparam-open-row">
                <td colspan="4">{</td>
              </tr>
              <tr class="subparam-row">
                <td>fastClicks</td>
                <td>boolean</td>
                <td>true</td>
                <td>Fast clicks is a built-in library that removes 300ms delay from links and form elements in mobile browser while you click them. You can disable this built-in library if you want to use other third party fast clicks script.</td>
              </tr>
              <tr class="subparam-row">
                <td>fastClicksDistanceThreshold</td>
                <td>number</td>
                <td>10</td>
                <td>Distance threshold (in px) to prevent short taps. So if tap/move distance is larger than this value then "click" will not be triggered</td>
              </tr>
              <tr class="subparam-row">
                <td>fastClicksDelayBetweenClicks</td>
                <td>number</td>
                <td>50</td>
                <td>Minimal allowed delay (in ms) between multiple clicks</td>
              </tr>
              <tr class="subparam-row">
                <td>fastClicksExclude</td>
                <td>string</td>
                <td></td>
                <td>This parameter allows to specify elements not handled by fast clicks by passing CSS selector of such elements</td>
              </tr>
              <tr class="subparam-row">
                <td>disableContextMenu</td>
                <td>boolean</td>
                <td>true</td>
                <td></td>
              </tr>
              <tr class="subparam-row">
                <td>tapHold</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enables tap hold</td>
              </tr>
              <tr class="subparam-row">
                <td>tapHoldDelay</td>
                <td>number</td>
                <td>750</td>
                <td>Determines how long (in ms) the user must hold their tap before the taphold event is fired on the target element</td>
              </tr>
              <tr class="subparam-row">
                <td>tapHoldPreventClicks</td>
                <td>boolean</td>
                <td>true</td>
                <td>When enabled (by default), then click event will not be fired after tap hold event</td>
              </tr>
              <tr class="subparam-row">
                <td>activeState</td>
                <td>boolean</td>
                <td>true</td>
                <td>When enabled, app will add "active-state" class to currently touched (:active) element.</td>
              </tr>
              <tr class="subparam-row">
                <td>activeStateElements</td>
                <td>string</td>
                <td>a, button, label, span, .actions-button</td>
                <td>CSS selector of elements where enabled <code>activeState</code> will add appropriate active class</td>
              </tr>
              <tr class="subparam-row">
                <td>materialRipple</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enables Material theme specific touch ripple effect</td>
              </tr>
              <tr class="subparam-row">
                <td>materialRippleElements</td>
                <td>string</td>
                <td>.ripple, .link, .item-link, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell, .notification-close-button</td>
                <td>CSS selector of elements to apply touch ripple effect on click</td>
              </tr>
              <tr class="subparam-close-row">
                <td colspan="4">}</td>
              </tr>
            </tbody>
          </table>
          <p>These are default app parameters for app core module.</p>
          <p>Most of components that has JavaScript API may extend this list of parameters with the property named as component. For example <a href="#">Panel</a> component extends app parameters with <code>panel</code> property that accepts Panel specific parameters.</p>
          <p>Example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  id<span class="token punctuation">:</span> <span class="token string">'com.myapp.test'</span><span class="token punctuation">,</span>
  <span class="token comment">// Extended by Panel component:</span>
  panel<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    swipe<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
    leftBreakpoint<span class="token punctuation">:</span> <span class="token number">768</span><span class="token punctuation">,</span>
    rightBreakpoint<span class="token punctuation">:</span> <span class="token number">1024</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Extended by Dialog component:</span>
  dialog<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'My App'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Extended by Statusbar component:</span>
  statusbar<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    iosOverlaysWebview<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>App Methods & Properties</h2>
          <p>Returned Framework7 instance <code>app</code> contains a lot of useful properties and methods:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>app.id</td>
                <td>App ID passed in parameters</td>
              </tr>
              <tr>
                <td>app.name</td>
                <td>App name passed in parameters</td>
              </tr>
              <tr>
                <td>app.version</td>
                <td>App version</td>
              </tr>
              <tr>
                <td>app.routes</td>
                <td>App routes</td>
              </tr>
              <tr>
                <td>app.language</td>
                <td>App language</td>
              </tr>
              <tr>
                <td>app.root</td>
                <td>Dom7 instance with app root element</td>
              </tr>
              <tr>
                <td>app.rtl</td>
                <td>Boolean property indicating app is in RTL layout or not</td>
              </tr>
              <tr>
                <td>app.theme</td>
                <td>Current app theme. Can be <code>md</code> or <code>ios</code></td>
              </tr>
              <tr>
                <td>app.data</td>
                <td>Object with app root data passed on intialization</td>
              </tr>
              <tr>
                <td>app.methods</td>
                <td>Object with app root methods</td>
              </tr>
              <tr>
                <td>app.width</td>
                <td>App width in px</td>
              </tr>
              <tr>
                <td>app.height</td>
                <td>App height in px</td>
              </tr>
              <tr>
                <td>app.left</td>
                <td>App left offset in px</td>
              </tr>
              <tr>
                <td>app.top</td>
                <td>App top offset in px</td>
              </tr>
              <tr>
                <td>app.initialized</td>
                <td>Boolean property indicating app is initialized or not</td>
              </tr>
              <tr>
                <td>app.$</td>
                <td>Dom7 alias</td>
              </tr>
              <tr>
                <td>app.t7</td>
                <td>Template7 alias</td>
              </tr>
              <tr>
                <td>app.params</td>
                <td>App parameters</td>
              </tr>
              <tr>
                <td>app.support</td>
                <td>Object with properties about supported features. Check the <a href="support.html">Support</a> utilities section</td>
              </tr>
              <tr>
                <td>app.device</td>
                <td>Object with properties about device. Check the <a href="device.html">Device</a> utilities section</td>
              </tr>
              <tr>
                <td>app.utils</td>
                <td>Object with some useful utilities. Check the <a href="utils.html">Utils</a> section</td>
              </tr>
              <tr>
                <td>app.request</td>
                <td>Contains methods to work with XHR requests. Check the <a href="request.html">Request</a> utilities section</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>app.on(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler</td>
              </tr>
              <tr>
                <td>app.once(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler that will be removed after it was fired</td>
              </tr>
              <tr>
                <td>app.off(<span>event</span>, <span>handler</span>)</td>
                <td>Remove event handler</td>
              </tr>
              <tr>
                <td>app.off(<span>event</span>)</td>
                <td>Remove all handlers for specified event</td>
              </tr>
              <tr>
                <td>app.emit(<span>event</span>, <span>...args</span>)</td>
                <td>Fire event on instance</td>
              </tr>
              <tr>
                <td>app.init()</td>
                <td>Initialize app. In case you disabled auto initialization with <code>init: false</code> parameter</td>
              </tr>
            </tbody>
          </table>
          <p>Same as with app parameters most of components that has JavaScript API may extend this list of properties with the property named as component. For example Panel component extends app instance properties with <code>panel</code> property that accepts Panel specific properties and methods.</p>
          <p>Example:</p><pre><code class="js"><span class="token comment">// Open panel</span>
app<span class="token punctuation">.</span>panel<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'left'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Hide statusbar</span>
app<span class="token punctuation">.</span>statusbar<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>App Events</h2>
          <p>App instance emits the following core events:</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Arguments</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>init</td>
                <td></td>
                <td>Event will be fired on app initialization. Automatically after <code>new Framework7()</code> or after <code>app.init()</code> if you disabled auto init.</td>
              </tr>
              <tr>
                <td>resize</td>
                <td></td>
                <td>Event will be fired on app resize (window resize).</td>
              </tr>
              <tr>
                <td>orientationchange</td>
                <td></td>
                <td>Event will be fired on app orientation change (window orientantion change).</td>
              </tr>
              <tr>
                <td>click</td>
                <td><span>event</span></td>
                <td>Event will be fired on app click</td>
              </tr>
              <tr>
                <td>touchstart:active</td>
                <td><span>event</span></td>
                <td>Event will be fired on touch start (mousedown) event added as active listener (possible to prevent default)</td>
              </tr>
              <tr>
                <td>touchmove:active</td>
                <td><span>event</span></td>
                <td>Event will be fired on touch move (mousemove) event added as active listener (possible to prevent default)</td>
              </tr>
              <tr>
                <td>touchend:active</td>
                <td><span>event</span></td>
                <td>Event will be fired on touch end (mouseup) event added as active listener (possible to prevent default)</td>
              </tr>
              <tr>
                <td>touchstart:passive</td>
                <td><span>event</span></td>
                <td>Event will be fired on touch start (mousedown) event added as passive listener (impossible to prevent default)</td>
              </tr>
              <tr>
                <td>touchmove:passive</td>
                <td><span>event</span></td>
                <td>Event will be fired on touch move (mousemove) event added as passive listener (impossible to prevent default)</td>
              </tr>
              <tr>
                <td>touchend:passive</td>
                <td><span>event</span></td>
                <td>Event will be fired on touch end (mouseup) event added as passive listener (impossible to prevent default)</td>
              </tr>
            </tbody>
          </table>
          <p>And again, most of components that has JavaScript API may extend this list of events like Panel component will also trigger additional events on app instance.</p>
          <p>Example:</p><pre><code class="js">app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'panelOpen'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">panel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Panel '</span> <span class="token operator">+</span> panel<span class="token punctuation">.</span>side <span class="token operator">+</span> <span class="token string">' opened'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>